<template>
	<view class="pageAll">
		<view class="pageContent">
			<view class="pageFile">
				<view class="pageTipTitle"><text>{{tipTitle}}</text></view>
				<view class="pageFileTip">
					<view class="welcome">
						{{userType === 1 ? userMessage.welMess : comMessage.welMess}}
					</view>
					<view class="message">
						{{userType === 1 ? userMessage.message_a : comMessage.message_a}}
					</view>
					<view class="message">
						{{userType === 1 ? userMessage.message_b : comMessage.message_b}}
					</view>
				</view>
				<view class="file">
					<view v-for="(item, index) in file" :key="index" class="checkContent">
						<view class="checkBox" @click="chooseFile(item,index)">
							<view :class="{'checkedRadio':item.isChoose}" class="radioView">
								<view v-if="item.isChoose" class="InnerSquare"></view>
							</view>
						</view>
						<view class="checkBoxText">
							<text @click="showText(item.file)">
								{{item.fileName}}
							</text>
						</view>
					</view>
				</view>

				<view class="fileBtn">
					<button @click="submit" hover-class="subActive">
						确认
					</button>
				</view>
			</view>
			<view class="pageBottomTip">
				<view class="pageBottomTipInfo" v-for="(item, index) in tipMessageBottom" :key="index">
					<text>{{item}}</text>
				</view>
				<view class="pageBottomBtn">
					<button @click="cancelDown" hover-class="subActive">
						<view class="btnIcon"></view>
					</button>
				</view>
			</view>
		</view>
		<!-- <logo class="Bottomlogo"></logo> -->
	</view>
</template>

<script>
	import logo from '../../../components/logo/bottomLogo.vue'
	export default {
		data() {
			return {
				tipTitle: '温馨提示',
				userMessage: {
					welMess:'欢迎您登陆红标，与我们共同打造中国品质食材。',
					message_a: '请您点击并认真阅读下方《红标买手合同》，《红标个人供应商合同》文件链接。如能同意合同条款的全部内容，请点击“确认”在线签署勾选协议。',
					message_b: '本协议经您确认并上传至红标后，即代表您同意协议条款的全部内容并自愿正式签署该协议。'
				},
				comMessage: {
					welMess: '欢迎您登陆红标，与我们共同打造中国特级食材。',
					message_a: '请您点击并认真阅读下方《红标供应商合同》文件链接。如能同意合同条款的全部内容，请点击“确认”在线签署勾选协议。',
					message_b: '本协议经您确认并上传至红标后，即代表您同意协议条款的全部内容并自愿正式签署该协议。'
				},
				file: [], // 文件内容
				userFile: [{
						fileName: '《红标买手合同》',
						isChoose: false,
						id: 'buyer',
						file: '',
					},
					{
						fileName: '《红标个人供应商合同》',
						isChoose: false,
						id: 'supplier',
						file: '',
					},
				],
				comFile: [{
					fileName: '《红标供应商合同》',
					isChoose: false,
					id: 'supplier',
					file: '',
				}, ],
				tipMessageBottom: [
					'如有合作疑问，请联系我们',
					'客服电话：18925233805 ',
					'收件地址：深圳市南山区西丽民企工业园5栋3层',
				],
				userType: 1,
				nowChooseFile: null, // 当前选择的文件对象
			}
		},
		methods: {
			showText(file) {
				uni.showLoading({
					title:'文件下载中',
					mask:true,
				})
				
				if(file) {
					this.downFile(file)
					.then(() => {
						uni.hideLoading()
					})
					.catch(() => {
						uni.hideLoading()
					})
				} else {
					this.getFile()
					.then(() => {
						this.downFile(file)
						.then(() => {
							uni.hideLoading()
						})
						.catch(() => {
							uni.hideLoading()
						})
					})
				}
			},
			// 下载文件
			downFile(file) {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url: file,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									resolve()
								},
								fail(err) {
									reject()
								}
							});
						},
						fail() {
							reject()
						}
					});
				})
				
			},
			submit() {
				if (this.nowChooseFile) {
					this.$api.inAudit({
							category: this.nowChooseFile.id
						})
						.then(res => {})
					// 先这样写，怕他到后面又改页面逻辑
					if (this.userType === 1) {
						uni.redirectTo({
							url: '../underReview/underReview'
						})
					} else if (this.userType === 2) {
						uni.redirectTo({
							url: '../underReview/underReview'
						})
					}
				} else {
					uni.showToast({
						title: '请选择合同',
						duration: 2000,
						icon: 'none'
					})
				}
			},
			// 选择文件
			chooseFile(value, index) {
				for (let item of this.file) {
					if (item.isChoose) {
						item.isChoose = false
					}
				}
				value.isChoose = !value.isChoose
				this.nowChooseFile = this.file[index]
			},
			// 复制链接
			parentDownFile() {
				uni.setClipboardData({
					data: '这是链接',
					success: function() {
						uni.showToast({
							title: '复制链接成功',
							duration: 2000
						})
					}
				});
				setTimeout(() => {
					uni.redirectTo({
						url: '../ImprovePerInfo/ImprovePerInfo'
					})
				}, 2000)
			},
			// 顶部X行按钮，返回上一页
			cancelDown() {
				uni.navigateBack({

				})
			},
			getFile() {
				return new Promise((resolve, reject) => {
					this.$api.getPact({})
						.then(res => {
							if (res.status) {
								this.$set(this.userFile[0], 'file', res.data.individual_buys_file)
								this.$set(this.userFile[1], 'file', res.data.individual_supplier_file)
								this.$set(this.comFile[0], 'file', res.data.company_supplier_file)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
							}
					
						})
				})
				
			}
		},
		components: {
			logo,
		},
		onLoad(option) {
			this.getFile()
			this.userType = parseInt(option.userType)
			if (this.userType === 1) {
				this.file = this.userFile
			} else if (this.userType === 2) {
				this.file = this.comFile
			}
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #c1504a;
		width: 100%;
		height: 100%;
		display: inline-block;
		padding: 0 17upx 0 17upx;
		display: flex;
		overflow-y: auto;
	}

	.pageContent {
		margin: auto;
	}

	.pageFile {
		width: 500upx;
		height: auto;
		background-color: #fdf5f3;
		padding: 33.33upx 20upx;
		border-radius: 20upx;
		box-shadow: 0 0 50upx 20upx rgba(40, 39, 38, 0.15);
		margin: 0 auto;
	}

	.pageTipTitle {
		text-align: center;
		padding-bottom: 33.33upx;
	}
	.pageTipTitle text {
		font-size: 34.66upx;
		color: #333333;
		font-weight: 600;
		letter-spacing: 10upx;
		text-indent: 10upx;
	}
	.pageFileTip {
		padding-bottom: 33.33upx;
		padding-left: 17upx;
		padding-right: 17upx;
		color: #333333;
		font-size: 26.66upx;
	}
	.pageFileTip > view {
		letter-spacing: 3upx;
		text-indent: 3upx;
	}
	.pageFileTip > .welcome{
		margin-bottom: 53.33upx;
	}

	.pageFile .file {}

	.pageFile .file:last-child {
		border-bottom: none;
		padding-bottom: 0 !important;
	}

	.pageBottomTip {
		margin-top: 66.66upx;
	}

	.pageBottomTipInfo {
		text-align: center;
		font-size: 24upx;
		color: #FFF;
		margin-bottom: 15upx;
		letter-spacing: 3upx;
		text-indent: 3upx;
	}

	.pageBottomBtn {
		margin-top: 33.33upx;
	}

	.pageBottomBtn button {
		width: 49.33upx;
		height: 55upx;
		background-color: #fbe8e7;
	}

	.btnIcon:before,
	.btnIcon:after {
		content: "";
		position: absolute;
		background: #ca4837;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.btnIcon:before {
		width: 55upx;
		height: 7upx;
		border-radius: 5upx;
	}

	.btnIcon:after {
		width: 7upx;
		height: 55upx;
		border-radius: 5upx;
	}

	.subActive {
		background-color: #FFC8C7 !important;
	}
	
	.checkContent {
		background-color: #eeeeee;
		border-radius: 15upx;
		height: 100upx;
		position: relative;
		box-sizing: border-box;
		display: flex;	
	}
	.file > .checkContent:first-child {
		margin-bottom: 13.33upx;
	}
	
	.checkBox {
		width: 34upx;
		height: 34upx;
		border-radius: 5upx;
		background-color: #FFFFFF;
		box-shadow: 0 0 20upx -10upx #474646;
		left: 17upx;
		margin: auto 0 auto 17upx;
	}

	.radioView {}

	.checkedRadio {
		display: flex;
		width: 34upx;
		height: 34upx;
	}

	.InnerSquare {
		margin: auto;
		width: 22upx;
		height: 22upx;
		border-radius: 5upx;
		background-color: #f7533e;
	}

	.checkBoxText {
		width: 100%;
		text-align: center;
		line-height: 100upx;
		padding-right: 50upx;
	}

	.checkBoxText text {
		line-height: 100upx;
		text-align: center;
		color: #f7533e;
		font-size: 26.66upx;
	}

	.fileBtn {
		margin-top: 66.66upx;
	}

	.fileBtn button {
		width: 112.66upx;
		height: 42.66upx;
		background-color: #f7533e;
		font-size: 26.66upx;
		color: #FFFFFF;
		line-height: 42.66upx;
		padding: 0;
	}

	.fileBtn button:after {
		border: none;
	}

	.checkBoxText text:active {
		text-decoration: underline;
	}

	.Bottomlogo {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
